<template>
  <div>
    <div class="demo-main" ref="dom"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

export default defineComponent({
    setup() {
      const dom = ref<HTMLElement | null>(null);
 
      onMounted(() => {
        console.log("onMounted", THREE);
        initThree(dom.value);
      });
 
      function initThree(instance: HTMLElement | null) {
           //dosomething
           var hetght = instance.clientHeight - 25;
            var width = instance.clientWidth - 25;

            // 创建场景对象Scene
            var scene = new THREE.Scene();

            // 创建相机对象
            var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);

            // 创建渲染器对象
            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(width, hetght);

            instance.append(renderer.domElement);
            renderer.render(scene, camera);
            camera.position.z = 5;
            renderer.setClearColor(0xeeeeee, 1.0);

            // 立方体网格模型
            var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
            //材质对象Material
            //材质决定了几何图形中的表面是如何画的。如果几何图形是骨架，定义了形状，那么材质就是皮肤。three.js 中有许多不同种类的材质，他们拥有不同的属性，像反光，纹理映射，调整透明度。
            var cubeMaterial = new THREE.MeshLambertMaterial({
                color: 0xff0000,
                opacity: 0.7,
                transparent: true,
            });
            var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
            scene.add(cube);
            
      }
 
      return { dom };
    }
});
</script>

<style lang="scss" scoped>
    
</style>